import React from 'react';
import { PasswordInput, Dialog,NumberKeyboard,hooks } from 'react-vant';
import {compareVerifycode} from '../../../api/verifycode'
import { addUser } from '../../../api/userinfo';
import { withRouter,useHistory,useLocation } from 'react-router-dom';
import './index.scss'
const Verifycode = (props) => {
    const [num,setNum] = React.useState('')
    const {phone,code1} = props.location.state
    console.log(props.location.state);
    const location = useLocation()
    const history = useHistory()
    const onSubmit = async (val) => {
        let res = await compareVerifycode({phone:phone,verifycode:val})
        if(res.code === 200){
            if(code1 === '短信登录'){
                props.history.push({
                    pathname:'/Layout/Home',
                    state:{
                        user:res.user
                    }
                })
            }else if(code1 === '找回密码'){
                props.history.push({
                    pathname:'/Editpass',
                    state:{
                        phone:phone,
                    }
                })
            }else if(code1 === '注册账号'){
                const {password,phone,name,sex,birthday} = location.state
                let result = await addUser({password:password,phone:phone,name:name,sex:sex,birthday:birthday})
                if(result.code === 200){
                    history.push('/Loginpass')
                }else{
                    Dialog.alert({
                        message:result.msg
                    })
                }
            }
        }else{
            Dialog.alert({
                message: res.msg,
            });                                     
            setNum('')
        }
    };
    const [state, set] = hooks.useSetState({
        v1: false,
    })
    
    const onInput = v => {
        setNum(num + v)
    }
    const onDelete = () => {
        setNum(num.slice(0,-1))
    }
    return (
        <div className='Verifycode'>
            <div className='Verifycode-main'>
                <h5>输入验证码</h5>
                <PasswordInput type="number" value={num} onFocus={()=>set({v1:true})} mask={false} length={6} onSubmit={onSubmit} style={{border:'1rem solid #ccc'}} />
                <NumberKeyboard
                    theme='custom'
                    extraKey='.'
                    closeButtonText='完成'
                    visible={state.v1}
                    onBlur={() => set({ v1: false })}
                    onInput={onInput}
                    onDelete={onDelete}
                    onClose={()=>onSubmit(num)}
                />
            </div>
        </div>
    );
}

export default withRouter(Verifycode);
